<template>
	<u-select v-model="modal" :confirm-color="confirmColor" :check-default="refresh" :default-value="defaultValue"
		:list="list" mode="mutil-column-auto" @confirm="confirm" @columnChange="columnChange">
		<view class="citySearchInput">
			{{searchResult.map(item=>item.name).join(",")}}
			<view class="search-box">
				<u-search ref="citySearch" :placeholder="$t('城市信息(默认不限)')" v-model="searchText" shape="square"
					:show-action="false" @search="searchCity" style="width: 90%;"></u-search>
				<view style="white-space: nowrap;" @click="searchCity">搜索</view>
			</view>
		</view>
	</u-select>
</template>

<script>
	import {
		COUNTRY
	} from '@/config/app';
	export default {
		props: {
			value: {
				type: Boolean,
				default: false,
			}
		},
		watch: {
			value(val) {
				this.modal = val
			},
			modal(val) {
				if (!val) {
					this.$emit("input", val)
					this.searchResult = [];
					this.searchText = '';
				}
			}
		},
		data() {
			return {
				modal: false,
				lang: getApp().globalData.lang,
				list: COUNTRY,
				confirmColor: '#2979ff',
				country: "0",
				defaultValue: [0, 0, 0],
				searchText: '',
				refresh: 0,
				searchResult: [], //自定义搜索的结果
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			/* 列发生改变 */
			columnChange(e) {
				this.searchResult = [];
			},
			getList() {
				const that = this
				this.$u.api.basic.getSelectCityList({
					country: that.country,
					pid: 0
				}).then(res => {
					that.list = res
				}).catch(err => {
				})
			},
			confirm(e) {
				let result = e;
				if (this.searchResult.length > 0) {
					result = this.searchResult.map(item => {
						return {
							label: item.name,
							value: item.id
						}
					})
				}
				this.modal = false;
				this.$emit('change', result)
			},
			searchCity(e) {
				this.defaultValue = [0, 0, 0]
				let params = {
					name: e
				};
				// if (this.lang === 'ru') {
				// 	params = {
				// 		name_r: e
				// 	};
				// }
				this.$u.api.basic.getSearchCity(params).then(res => {
					if (!res) {
						this.$u.toast(this.$t('未查询到数据'))
						return
					}
					this.searchResult = res;
					const c = this.list.filter((item, index) => {
						if (item.value == res[0].id) {
							this.defaultValue[0] = index;
							this.refresh++
							return true
						} else {
							return false
						}
					})[0];
					const s = c?.children.filter((item, index) => {
						if (item.value == res[1].id) {
							this.defaultValue[1] = index;
							this.refresh++
							return true
						} else {
							return false
						}
					})[0];
					const b = s?.children.filter((item, index) => {
						if (item.value == res[2].id) {
							setTimeout(() => {
								this.defaultValue[2] = index;
								this.refresh++
							}, 10)
							return true
						} else {
							return false
						}
					})[0];
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.citySearchInput {
		margin: 0 auto;
		width: 90%;
	}

	.search-box {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #f2f2f2;
	}
</style>